<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig } from '@wangeditor/editor'
import { DomEditor, IEditorConfig } from '@wangeditor/editor'
const editorRef = shallowRef()
const editorData = ref('');

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    }, 1500)
})

const toolbarConfig: Partial<IToolbarConfig> = {
    toolbarKeys: [
        // 正文 h1 h2
        'headerSelect',

        // 分割线
        '|',

        // 菜单 key
        'bold', 'italic',

        // 菜单组，包含多个菜单
        {
            key: 'group-more-style', // 必填，要以 group 开头
            title: '更多样式', // 必填
            iconSvg: '<svg>....</svg>', // 可选
            menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
        },
        // 继续配置其他菜单...
        "editLink",
        'underline',
        "justifyJustify",
        "enter",
        '|',
        "uploadImage",
        "color",
        "bgColor"
    ]
}
const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    readOnly: false,
    autoFocus: true,
    MENU_CONF: {
        color: {
            colors: ['#000', '#333', '#666']
        },
        bgColor: {
            colors: ['#000', '#333', '#666']
        },
        uploadImage: {
            server: '/api/upload-image',
            fieldName: 'custom-field-name',
            // 继续写其他配置...
            base64LimitSize: 10 * 1024 * 1024 // 10M

            //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
        }
    },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    console.log('全部可用配置editor.getAllMenuKeys()', editor.getAllMenuKeys()
    );
}

const getData = () => {
    editorData.value = valueHtml.value
}
</script>
<script lang="ts">
export default {
    name: 'page3_3'
}
</script>
    
<template>
    <div style="border:1px solid red;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            @onCreated="handleCreated" />
    </div>
    <el-button style="width:150px;" @click="getData">保存</el-button>
    {{ editorData }}
</template>
<style lang="scss" scoped>

</style>